<template>
  <q-popup-proxy context-menu>
    <q-list dense style="min-width: 130px" class="q-py-sm">
      <template v-for="(item,index) in options">
        <q-item clickable v-close-popup dense>
          <q-item-section :style="item.style" @click="clickItem(item)" dense>{{item.label}}</q-item-section>
        </q-item>
        <q-separator v-show="index < options.length - 1" inset class="q-my-sm"></q-separator>
      </template>
    </q-list>
  </q-popup-proxy>
</template>

<script setup>
import {useAttrs} from 'vue'
const attrs = useAttrs()
const emits = defineEmits(['event'])
const props = defineProps({
  options: {
    type: Array,
    default: () => []
  },
  scope: Object
})
function clickItem(item) {
  if(item.click && item.click instanceof Function) {
    item.click(props.scope)
  }
  if(item.eventName) {
    let eventName = item.eventName.charAt(0).toUpperCase() + item.eventName.slice(1)
    attrs[`on` + eventName]()
  }
}
</script>

<style scoped>

</style>
